<template>
    <a-modal
            title="新增协议"
            v-model="addVisible"
            @ok="addOk"
            width="800px"
            :maskClosable="false"
            okText="保存"
            @cancel="handleCancel">
        <a-form :form="form" @submit="addOk">
            <a-form-item class="form-item" label="协议名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-input
                        autocomplete="off"
                        v-decorator="['xyMc',{rules: [{ required: true,  message: '请输入协议名' }]}]"
                        placeholder="请输入协议名"
                />
            </a-form-item>
            <a-form-item class="form-item" label="协议类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-select
                        v-decorator="['xyLxbz',{rules: [{ required: true, message: '请选择协议类型' }]}]"
                        placeholder="请选择协议类型"
                        @change="handleSelectXyLxbz"
                >
                    <a-select-option value="0">
                        其它
                    </a-select-option>
                    <a-select-option value="1">
                        用户服务
                    </a-select-option>
                    <a-select-option value="2">
                        隐私服务
                    </a-select-option>
                    <a-select-option value="3">
                        授权服务
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="form-item" label="协议状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-select
                        v-decorator="['xySfqy',{rules: [{ required: true, message: '请选择协议状态' }]}]"
                        placeholder="请选择协议状态"
                        @change="handleSelectXySfqy"
                >
                    <a-select-option value="0">
                        启用
                    </a-select-option>
                    <a-select-option value="1">
                        禁用
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="form-item" label="协议内容" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            </a-form-item>
        </a-form>
        <editor :init="init" v-model="content" style="width: 100%;height: 100%"></editor>
    </a-modal>
</template>

<script>
    import 'tinymce/themes/silver/theme.min.js';
    import 'tinymce/skins/ui/oxide/skin.min.css';
    import 'tinymce/plugins/image';
    import Editor from '@tinymce/tinymce-vue';
    import '@/api/tinymce/langs/zh_CN.js';
    import {putAction} from '@/api/manage'

    export default {
        name: "InsertUserXy",
        components: {
            Editor
        },
        created() {

        },
        data() {
            return {
                content: "",
                xyMc: "",
                xyLxbz: "",
                xySfqy: "",
                init: {
                    // 组件
                    plugins:
                        ' lists image colorpicker textcolor wordcount contextmenu autoresize',
                    // 工具栏
                    toolbar:
                        'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
                    branding: false,
                    min_height: 500,
                    // 引入汉化组件
                    language_url: '../../../../public/tinymce/langs/zh_CN.js',
                    // 加入主题
                    skin_url: 'tinymce/skins/ui/oxide',
                    // 设定语言为中文
                    language: 'zh_CN',// 注册功能组件
                },
                formLayout: 'horizontal',
                form: this.$form.createForm(this),
                addVisible: false,
                url: {
                    "saveOneUserXy": "/user_xy/userXy/saveOneUserXy",
                }
            };
        },
        methods: {
            handleSelectXyLxbz(value) {
                console.log("选择类型", value);
                this.form.setFieldsValue({
                    xyLxbz: value,
                });
            },
            handleSelectXySfqy(value) {
                console.log("选择状态", value);
                this.form.setFieldsValue({
                    xySfqy: value,
                });
            },
            addModelOpen() {
                this.addVisible = true;
            },
            addOk(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (err) {
                        console.log('Received values of form: ', values);
                    } else {
                        const that = this;
                        this.addVisible = false;
                        var userXy = {
                            xyMc: this.form.getFieldValue("xyMc"),
                            xyLxbz: parseInt(this.form.getFieldValue("xyLxbz")),
                            xyNr: this.content,
                            xySfqy: parseInt(this.form.getFieldValue("xySfqy")),
                        };
                        console.log("userXy", userXy);
                        putAction(this.url.saveOneUserXy, userXy).then(res => {
                            if (res.success) {
                                console.log("成功", res);
                                this.$message.success("新增成功！");//添加的全局提醒
                                that.$emit('ok');
                            } else {
                                this.$message.error("新增失败！");//添加的全局提醒
                            }
                        })
                    }
                });
            },
            handleCancel() {

            }
        },
    }
</script>

<style lang="less" scoped>
    .form-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>